<template>
  <!-- 训练营页面 -->
  <div class="train-page">
    <!-- book header -->
    <div class="header">
      <div class="header-top">
        <div class="logo-l"></div>
        <div class="icon-r">
          <van-icon name="search" color="#fff" size="20" />
        </div>
      </div>
      <div class="tab-wrap">
        <div class="tab-list">
          <span class="tab-item">训练营</span>
        </div>
      </div>
    </div>
    <!-- book body -->
    <div class="body">
      <div class="body-top">
        <div class="book-sorts">
          <div
            class="book-sort-item"
            :class="sort == 'new' ? 'active' : ''"
            @click="sort = 'new'"
          >
            最新
          </div>
          <div
            class="book-sort-item"
            :class="sort == 'hot' ? 'active' : ''"
            @click="sort = 'hot'"
          >
            热门
          </div>
          <div
            class="book-sort-item"
            :class="sort == 'vote' ? 'active' : ''"
            @click="sort = 'vote'"
          >
            推荐
          </div>
        </div>
      </div>
      <!-- 主体 -->
      <div class="body-container">
        <TrainItem
          v-for="t in trainListData"
          :key="t.id"
          :coverKey="t.coverKey"
          :name="t.name"
          :teacherName="t.teacherName"
          :classHour="t.classHour"
          :userCount="t.userCount"
          :salePrice="t.salePrice"
        />
      </div>
    </div>
  </div>
</template>
  
  <script>
import { TagTrainAPI } from "../apis";
import TrainItem from "@/components/TrainItem.vue";
export default {
  data() {
    return {
      // 课程数据
      trainListData: [],
      sort: "new",
      page: "1",
    };
  },
  watch: {
    // 监视sort的变化
    sort(current, old) {
      if (current != old) {
        this.getTrainData();
      }
    },
  },
  mounted() {
    this.getTrainData();
  },
  methods: {
    // 获取训练营数据
    async getTrainData() {
      let { data } = await this.$http(TagTrainAPI(this.sort, this.page));
      console.log(data);
      this.trainListData = data.trainingPlanItems;
    },
    //
  },
  components: {
    TrainItem,
  },
};
</script>
  
  <style lang="scss" scoped>
.train-page {
  width: 100vw;

  .header {
    background-color: var(--theme-blue);

    .header-top {
      padding: 20px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo-l {
        background: url("../assets/logo.png") no-repeat 0 0;
        background-size: 180px 35px;
        width: 180px;
        height: 35px;
      }
      .icon-r {
        padding: 10px 0 0 10px;
        .van-icon-shopping-cart-o {
          margin-right: 20px;
        }
      }
    }
    .tab-wrap {
      padding: 0 0 16px 0;
      overflow-x: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .tab-list {
        display: flex;
        width: 750px;
        .tab-item {
          font-size: 20px;
          color: #fff;
          font-weight: bold;
          line-height: 26px;
          margin: 0 20px 0 15px;
        }
      }
    }
  }
  .body {
    .body-top {
      display: flex;
      justify-content: space-between;
      padding: 15px 15px 0;
      border-bottom: 2px solid var(--more-bg-white);
      border-radius: 5px;
      .book-sorts {
        display: flex;
        .book-sort-item {
          color: #000;
          font-size: 14px;
          margin-right: 20px;
          padding-bottom: 10px;
          &.active {
            font-weight: bolder;
            border-bottom: 2px solid var(--theme-blue);
          }
        }
      }
      .more-sort {
        color: var(--theme-blue);
        font-size: 14px;
      }
    }
    .body-container{
      padding: 15px 15px 0;
    }
  }
}
</style>
  